﻿@{
    ViewBag.Title = "Tabbale Navigation";
}

<h2>Tabbale Navigation samples</h2>

<h3>Sample #1, above</h3>

@{
    {
        var tabNav = Html.CreateBootstrapTabNav(TabNavOptions.Above);
        var tab1 = tabNav.CreateTabPane("Home", TabPaneOptions.Active);
        var tab2 = tabNav.CreateTabPane("Profile");
        var tab3 = tabNav.CreateTabPane("Default");

        using (var tabSection = Html.BootstrapTabNav(tabNav, htmlAttributes: new { @class = "well" }))
        {
            using (tabSection.TabPane(tab1))
            {
    <span>Anim pariatur cliche... 1</span>
            }
            using (tabSection.TabPane(tab2))
            {
    <span>Anim pariatur cliche... 2</span>
            }
            using (tabSection.TabPane(tab3))
            {
    <span>Anim pariatur cliche... 3</span>
            }
        }
    }
}

@using (Html.VisiToggler("show the sample source code ", VisiOptions.HiddenByDefault, htmlAttributes: new { @class = "onright" }))
{
    <br />
    <div class="code">
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tabNav&nbsp;=&nbsp;Html.CreateBootstrapTabNav(TabNavOptions.Above);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab1&nbsp;=&nbsp;tabNav.CreateTabPane(<span class="String">"Home"</span>,&nbsp;TabPaneOptions.Active);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab2&nbsp;=&nbsp;tabNav.CreateTabPane(<span class="String">"Profile"</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab3&nbsp;=&nbsp;tabNav.CreateTabPane(<span class="String">"Default"</span>);<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(<span class="Linq">var</span>&nbsp;tabSection&nbsp;=&nbsp;Html.BootstrapTabNav(tabNav,&nbsp;htmlAttributes:&nbsp;<span class="Keyword">new</span>&nbsp;{&nbsp;&#64;<span class="ReferenceType">class</span>&nbsp;=&nbsp;<span class="String">"well"</span>&nbsp;}))<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab1))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;1&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab2))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;2&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab3))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;3&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;}
</div>
}

<h3>Sample #2, below</h3>

@{
    {
        var header2 = Html.Container()
                       .Add<Img>("~/Images/icon-leaf.png", htmlAttributes: new { title = "this is title", width = 18, height = 18 })
                       .Add(" Profile");
        
        var tabNav = Html.CreateBootstrapTabNav(TabNavOptions.Below);
        var tab1 = tabNav.CreateTabPane("Home");
        var tab2 = tabNav.CreateTabPane(header2, TabPaneOptions.Active);
        var tab3 = tabNav.CreateTabPane("Default");

        using (var tabSection = Html.BootstrapTabNav(tabNav, htmlAttributes: new { @class = "well" }))
        {
    @tab1.FromPartial(TabPartials.PARTIAL1)
    @tab2.FromPartial(TabPartials.PARTIAL2)
            using (tabSection.TabPane(tab3))
            {
    <span>Anim pariatur cliche... 3</span>
            }
        }
    }
}

@using (Html.VisiToggler("show the sample source code ", VisiOptions.HiddenByDefault, htmlAttributes: new { @class = "onright" }))
{
    <br />
    <div class="code">
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;header2&nbsp;=&nbsp;Html.Container()<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.Add&lt;Img&gt;(<span class="String">"~/Images/icon-leaf.png"</span>,&nbsp;htmlAttributes:&nbsp;<span class="Keyword">new</span>&nbsp;{&nbsp;title&nbsp;=&nbsp;<span class="String">"this&nbsp;is&nbsp;title"</span>,&nbsp;width&nbsp;=&nbsp;18,&nbsp;height&nbsp;=&nbsp;18&nbsp;})<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.Add(<span class="String">"&nbsp;Profile"</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tabNav&nbsp;=&nbsp;Html.CreateBootstrapTabNav(TabNavOptions.Below);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab1&nbsp;=&nbsp;tabNav.CreateTabPane(<span class="String">"Home"</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab2&nbsp;=&nbsp;tabNav.CreateTabPane(header2,&nbsp;TabPaneOptions.Active);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab3&nbsp;=&nbsp;tabNav.CreateTabPane(<span class="String">"Default"</span>);<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(<span class="Linq">var</span>&nbsp;tabSection&nbsp;=&nbsp;Html.BootstrapTabNav(tabNav,&nbsp;htmlAttributes:&nbsp;<span class="Keyword">new</span>&nbsp;{&nbsp;&#64;<span class="ReferenceType">class</span>&nbsp;=&nbsp;<span class="String">"well"</span>&nbsp;}))<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&#64;tab1.FromPartial(TabPartials.PARTIAL1)<br />
&#64;tab2.FromPartial(TabPartials.PARTIAL2)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab3))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;3&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;}
</div>
}

<h3>Sample #3, left</h3>

@{
    {
        var tabNav = Html.CreateBootstrapTabNav(TabNavOptions.Left);
        var tab1 = tabNav.CreateTabPane("Home", TabPaneOptions.Active);
        var tab2 = tabNav.CreateTabPane("Profile");
        var tab3 = tabNav.CreateTabPane("Default");        

    <div>Control tabs outside the section.</div>
    <div>
        Activate second tab (java-script)
        <input type="button" onclick="@tab2.ActivateTabJS()" value="activate" />
    </div>
    
        using (var tabSection = Html.BootstrapTabNav(tabNav, htmlAttributes: new { @class = "well" }))
        {
            using (tabSection.TabPane(tab1))
            {
    <span>Anim pariatur cliche... 1</span>
            }
            using (tabSection.TabPane(tab2))
            {
    <span>Anim pariatur cliche... 2</span>
            }
            using (tabSection.TabPane(tab3))
            {
    <span>Anim pariatur cliche... 3</span>
            }
        }
    }
}

@using (Html.VisiToggler("show the sample source code ", VisiOptions.HiddenByDefault, htmlAttributes: new { @class = "onright" }))
{
    <br />
    <div class="code">
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tabNav&nbsp;=&nbsp;Html.CreateBootstrapTabNav(TabNavOptions.Left);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab1&nbsp;=&nbsp;tabNav.CreateTabPane(<span class="String">"Home"</span>,&nbsp;TabPaneOptions.Active);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab2&nbsp;=&nbsp;tabNav.CreateTabPane(<span class="String">"Profile"</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab3&nbsp;=&nbsp;tabNav.CreateTabPane(<span class="String">"Default"</span>);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<br />
&lt;div&gt;Control&nbsp;tabs&nbsp;outside&nbsp;the&nbsp;section.&lt;/div&gt;<br />
&lt;div&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;Activate&nbsp;second&nbsp;tab&nbsp;(java-script)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=<span class="String">"button"</span>&nbsp;onclick=<span class="String">"&#64;tab2.ActivateTabJS()"</span>&nbsp;value=<span class="String">"activate"</span>&nbsp;/&gt;<br />
&lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(<span class="Linq">var</span>&nbsp;tabSection&nbsp;=&nbsp;Html.BootstrapTabNav(tabNav,&nbsp;htmlAttributes:&nbsp;<span class="Keyword">new</span>&nbsp;{&nbsp;&#64;<span class="ReferenceType">class</span>&nbsp;=&nbsp;<span class="String">"well"</span>&nbsp;}))<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab1))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;1&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab2))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;2&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab3))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;3&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;}
</div>
}

<h3>Sample #4, right</h3>

@{
    {
        var tabNav = Html.CreateBootstrapTabNav(TabNavOptions.Right);
        var tab1 = tabNav.CreateTabPane("Home", TabPaneOptions.Active);
        var tab2 = tabNav.CreateTabPane("Profile");
        var tab3 = tabNav.CreateTabPane("Default");

        using (var tabSection = Html.BootstrapTabNav(tabNav, htmlAttributes: new { @class = "well" }))
        {
            using (tabSection.TabPane(tab1))
            {
    <span>Anim pariatur cliche... 1</span>
            }
            using (tabSection.TabPane(tab2))
            {
    <span>Anim pariatur cliche... 2</span>
            }
            using (tabSection.TabPane(tab3))
            {
    <span>Anim pariatur cliche... 3</span>
            }
        }
    }
}

@using (Html.VisiToggler("show the sample source code ", VisiOptions.HiddenByDefault, htmlAttributes: new { @class = "onright" }))
{
    <br />
    <div class="code">
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tabNav&nbsp;=&nbsp;Html.CreateBootstrapTabNav(TabNavOptions.Right);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab1&nbsp;=&nbsp;tabNav.CreateTabPane(<span class="String">"Home"</span>,&nbsp;TabPaneOptions.Active);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab2&nbsp;=&nbsp;tabNav.CreateTabPane(<span class="String">"Profile"</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;tab3&nbsp;=&nbsp;tabNav.CreateTabPane(<span class="String">"Default"</span>);<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(<span class="Linq">var</span>&nbsp;tabSection&nbsp;=&nbsp;Html.BootstrapTabNav(tabNav,&nbsp;htmlAttributes:&nbsp;<span class="Keyword">new</span>&nbsp;{&nbsp;&#64;<span class="ReferenceType">class</span>&nbsp;=&nbsp;<span class="String">"well"</span>&nbsp;}))<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab1))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;1&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab2))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;2&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(tabSection.TabPane(tab3))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;3&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;}
</div>
}